<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy stage</title>
    <style>
        /* Basic reset and page styling */
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #333;
            overflow: hidden;
        }
        /* Canvas styling to maintain a portrait 9:16 aspect ratio */
        canvas {
            background-color: #70c5ce;
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- The canvas element where the game will be rendered -->
    <canvas id="gameCanvas"></canvas>

    <script>
        // --- Canvas and Context Setup ---
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // Set a base resolution for the game
        const gameWidth = 500;
        const gameHeight = 750;
        canvas.width = gameWidth;
        canvas.height = gameHeight;

        // --- SVG Bird Character ---
        const birdImage = new Image();
        // The user-provided SVG, formatted as a data URI
        const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 2048 2048" fill="white"><ellipse id="path1" ry="624" rx="624" cy="1024" cx="1024" stroke="black" stroke-width="100px" /><ellipse id="path2" ry="160" rx="160" cy="1024" cx="1450" fill="black" /><path id="path3" fill="black" d="M 1024 0 A 1024 1024 0 0 0 0 1024 A 1024 1024 0 0 0 1024 2048 L 1736 2048 L 1848 2048 C 1958.7998 2048 2048 1958.7998 2048 1848 L 2048 1736 L 2048 1024 A 1024 1024 0 0 0 1024 0 z M 1024.9414 200 A 824 824 0 0 1 1848.9414 1024 A 824 824 0 0 1 1024.9414 1848 A 824 824 0 0 1 200.94141 1024 A 824 824 0 0 1 1024.9414 200 z " /></svg>`;
        birdImage.src = 'data:image/svg+xml,' + encodeURIComponent(svgString.replace(/\s+/g, ' ').trim());


        // --- Game State and Variables ---
        let bird, pipes, clouds, score, isGameOver, frameCount, currentSpeed;
        let hasStarted; 
        let gameOverTimeout; 

        // --- Game Constants ---
        const BIRD_PROPS = {
            x: 60,
            y: 250,
            radius: 18, // Slightly increased radius to better fit the new character
            gravity: 0.3, 
            lift: -7,   
            velocity: 0
        };

        const PIPE_PROPS = {
            width: 60,
            capWidth: 70, 
            capHeight: 25, 
            gap: 160,
            speed: 2, // Initial speed
        };
        
        const SPAWN_DISTANCE = 220;
        const FLOOR_HEIGHT = 50;
        const CLOUD_SPEED = 0.5;

        // --- Game Initialization ---
        function initializeGame() {
            bird = { ...BIRD_PROPS };
            pipes = [];
            score = 0;
            isGameOver = false;
            hasStarted = false; 
            frameCount = 0;
            currentSpeed = PIPE_PROPS.speed;
            
            if (!clouds || clouds.length === 0) {
                clouds = [];
                for (let i = 0; i < 5; i++) {
                    clouds.push({
                        x: Math.random() * canvas.width,
                        y: Math.random() * (canvas.height / 2),
                        radius: Math.random() * 20 + 20
                    });
                }
            }
        }

        // --- Drawing Functions ---

        function drawClouds() {
            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; 
            clouds.forEach(cloud => {
                ctx.beginPath();
                ctx.arc(cloud.x, cloud.y, cloud.radius, 0, Math.PI * 2);
                ctx.arc(cloud.x + cloud.radius * 0.8, cloud.y, cloud.radius * 1.2, 0, Math.PI * 2);
                ctx.arc(cloud.x - cloud.radius * 0.8, cloud.y, cloud.radius * 1.1, 0, Math.PI * 2);
                ctx.fill();
            });
        }

        function drawPipes() {
            pipes.forEach(pipe => {
                ctx.fillStyle = '#73bf2e';
                ctx.strokeStyle = '#4f8220';
                ctx.lineWidth = 4;

                ctx.fillRect(pipe.x, 0, PIPE_PROPS.width, pipe.topHeight);
                ctx.strokeRect(pipe.x, 0, PIPE_PROPS.width, pipe.topHeight);
                
                const topCapX = pipe.x - (PIPE_PROPS.capWidth - PIPE_PROPS.width) / 2;
                ctx.fillRect(topCapX, pipe.topHeight - PIPE_PROPS.capHeight, PIPE_PROPS.capWidth, PIPE_PROPS.capHeight);
                ctx.strokeRect(topCapX, pipe.topHeight - PIPE_PROPS.capHeight, PIPE_PROPS.capWidth, PIPE_PROPS.capHeight);

                ctx.fillRect(pipe.x, pipe.bottomY, PIPE_PROPS.width, canvas.height - pipe.bottomY - FLOOR_HEIGHT);
                ctx.strokeRect(pipe.x, pipe.bottomY, PIPE_PROPS.width, canvas.height - pipe.bottomY - FLOOR_HEIGHT);

                const bottomCapX = pipe.x - (PIPE_PROPS.capWidth - PIPE_PROPS.width) / 2;
                ctx.fillRect(bottomCapX, pipe.bottomY, PIPE_PROPS.capWidth, PIPE_PROPS.capHeight);
                ctx.strokeRect(bottomCapX, pipe.bottomY, PIPE_PROPS.capWidth, PIPE_PROPS.capHeight);
            });
        }

        function drawFloor() {
            ctx.fillStyle = '#4a7f2a'; 
            ctx.strokeStyle = '#3b6221';
            ctx.lineWidth = 4;
            ctx.fillRect(0, canvas.height - FLOOR_HEIGHT, canvas.width, FLOOR_HEIGHT);
            ctx.strokeRect(0, canvas.height - FLOOR_HEIGHT, canvas.width, FLOOR_HEIGHT);
        }

        function drawBird() {
            ctx.save();
            ctx.translate(bird.x, bird.y);

            if (hasStarted) {
                const maxRotation = Math.PI / 2; 
                const minRotation = -Math.PI / 6; 
                const rotation = Math.max(minRotation, Math.min(maxRotation, bird.velocity * 0.08));
                ctx.rotate(rotation);
            }

            // Draw the SVG image, centered on the bird's new origin
            ctx.drawImage(birdImage, -bird.radius, -bird.radius, bird.radius * 2, bird.radius * 2);

            ctx.restore();
        }

        // --- Update Functions ---

        function updateClouds() {
            clouds.forEach(cloud => {
                cloud.x -= CLOUD_SPEED;
            });

            if (frameCount % 200 === 0) {
                 clouds.push({
                    x: canvas.width + 50,
                    y: Math.random() * (canvas.height / 2),
                    radius: Math.random() * 20 + 20
                });
            }

            clouds = clouds.filter(cloud => cloud.x + cloud.radius * 2 > 0);
        }

        function updateBird() {
            bird.velocity += bird.gravity;
            bird.y += bird.velocity;

            if (bird.y - bird.radius < 0) {
                bird.y = bird.radius;
                bird.velocity = 0;
            }

            if (bird.y + bird.radius > canvas.height - FLOOR_HEIGHT) {
                endGame();
            }
        }

        function flap() {
            if (isGameOver) {
                clearTimeout(gameOverTimeout);
                initializeGame();
                return;
            }

            if (!hasStarted) {
                hasStarted = true;
            }
            
            bird.velocity = bird.lift;
        }

        function updatePipes() {
            if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - SPAWN_DISTANCE) {
                const topHeight = Math.random() * (canvas.height - PIPE_PROPS.gap - 200 - FLOOR_HEIGHT) + 100;
                pipes.push({
                    x: canvas.width,
                    topHeight: topHeight,
                    bottomY: topHeight + PIPE_PROPS.gap,
                    passed: false
                });
            }

            pipes.forEach(pipe => {
                pipe.x -= currentSpeed;
                if (!pipe.passed && pipe.x + PIPE_PROPS.width < bird.x) {
                    score++;
                    pipe.passed = true;
                }
            });

            pipes = pipes.filter(pipe => pipe.x + PIPE_PROPS.capWidth > 0);
        }

        // --- Collision and Game State ---
        function checkCollisions() {
            for (let pipe of pipes) {
                const capX = pipe.x - (PIPE_PROPS.capWidth - PIPE_PROPS.width) / 2;
                const capWidth = PIPE_PROPS.capWidth;

                if (bird.x + bird.radius > capX && bird.x - bird.radius < capX + capWidth) {
                    if (bird.y - bird.radius < pipe.topHeight || bird.y + bird.radius > pipe.bottomY) {
                        endGame();
                        return;
                    }
                }
            }
        }

        function endGame() {
            if (!isGameOver) {
                isGameOver = true;
                gameOverTimeout = setTimeout(initializeGame, 3000);
            }
        }

        // --- Main Game Loop ---
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            if (!isGameOver) {
                if (hasStarted) {
                    updateBird();
                    updatePipes();
                    checkCollisions();
                    currentSpeed += 0.001;
                }
                updateClouds();
                frameCount++;
            }

            drawClouds();
            if(hasStarted || isGameOver) {
                drawPipes();
            }
            drawFloor();
            drawBird();
            
            if (!isGameOver) {
                if (hasStarted) {
                    ctx.fillStyle = 'white';
                    ctx.font = 'bold 45px sans-serif';
                    ctx.strokeStyle = 'black';
                    ctx.lineWidth = 5;
                    ctx.textAlign = 'center';
                    ctx.strokeText(score, canvas.width / 2, 60);
                    ctx.fillText(score, canvas.width / 2, 60);
                } else {
                    ctx.fillStyle = 'white';
                    ctx.font = 'bold 30px sans-serif';
                    ctx.strokeStyle = 'black';
                    ctx.lineWidth = 4;
                    ctx.textAlign = 'center';
                    ctx.strokeText('Tap to Start', canvas.width / 2, canvas.height / 2);
                    ctx.fillText('Tap to Start', canvas.width / 2, canvas.height / 2);
                }
            } else {
                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = 'white';
                ctx.font = 'bold 50px sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2 - 40);
                ctx.font = 'bold 30px sans-serif';
                ctx.fillText(`Score: ${score}`, canvas.width / 2, canvas.height / 2 + 20);
            }

            requestAnimationFrame(gameLoop);
        }

        // --- Event Listeners ---
        window.addEventListener('keydown', (e) => {
            if (e.code === 'Space') flap();
        });
        window.addEventListener('mousedown', flap);
        window.addEventListener('touchstart', (e) => {
            e.preventDefault();
            flap();
        }, { passive: false });

        // --- Start the game ---
        initializeGame();
        gameLoop();
    </script>
</body>
</html>
